Vue + ArcGIS api 实时同步范围+坐标

留言

修改中心坐标需要是地理坐标系

功能 ID 函数
同步范围 #extent-change showExtent
同步坐标 ‘#MouseMove’ showCoordinates
变量 含义
extent_tag 绑定范围的显示标签
xyText 绑定坐标的显示标签
extent_zdy 修改范围的值
xy_zdy 修改XY的值 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
mounted() {
  esriLoader.setDefaultOptions({ version: '3.28' })
  this.createMap()
},
methods: {
  createMap: function() {
    esriLoader.loadModules(['esri/map',
      'esri/geometry/Extent',
      'esri/layers/ArcGISDynamicMapServiceLayer',
      'dojo/query',
      'esri/toolbars/navigation',
      'esri/geometry/Point',
      'dojo/domReady!'], { css: true })
      .then(([Map, Extent, ArcGISDynamicMapServiceLayer, query, Navigation, Point]) => {

        var tjUAVurl = 'http://localhost:6080/arcgis/rest/services/Eco/BJ_td_gd_nyd/MapServer'

        var map = new Map('map', {
          extent: new Extent({
            xmin: 114.4134760856628,
            ymin: 40.13100080490112,
            xmax: 118.36547288894677,
            ymax: 41.64383821487438,
            spatialReference: {
              wkid: 4326
            }
          }),
          logo: false
        })

        var tjUAVLayer = new ArcGISDynamicMapServiceLayer(tjUAVurl)
        map.addLayer(tjUAVLayer)

        // *************************************************************************************** //

        var that = this

        function showExtent() {
          // console.log(that.extent_tag)
          var extent = map.extent
          var s = []
          s[0] = 'XMin:' + extent.xmin
          s[1] = 'YMin:' + extent.ymin
          s[2] = 'XMax:' + extent.xmax
          s[3] = 'YMax:' + extent.ymax
          that.extent_tag = s
          that.extent_zdy = map.extent
        }

        function showCoordinates(event) {
          var mp = event.mapPoint
          that.xy_zdy = mp
          that.xyText = mp.x + ',' + mp.y
        }

        showExtent()

        map.on('extent-change', showExtent)
        map.on('MouseMove', showCoordinates)
      })
  }
}

文章目录